<script name="H5" setup>
import "@/utils/rem";
import { reactive, ref, onMounted } from "vue";
import { receiveFnc, getPhoneCode } from "@/api/phoneBill/receive";
// import { showToast } from "vant"
import { showToast } from "vant";
const send = ref("获取验证码");
const btnFlag = ref(false);
const loading = ref(false);
const versions = ref('')
const num = ref('')
const formData = reactive({
    userName: "",
    phoneNumber: "",
});
/**获取手机验证码 */
const time = ref(60);
const codeTime = ref(false);

const getCode = () => {
    const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

    if (
        formData.userName &&
        formData.phoneNumber &&
        reg.test(formData.phoneNumber)
    ) {
        getPhoneCode({
            phoneNumber: formData.phoneNumber,
            userName: formData.userName,
        }).then((res) => {
            console.log(res.msg);
            if (res.code == 200) {
                codeTime.value = true;
                versions.value = res.data.versions
                num.value = res.data.num
                const timer = setInterval(() => {
                    time.value--;
                    if (time.value >= 0) {
                        send.value = time.value + "s后刷新";
                    } else if (time.value < 0) {
                        send.value = "获取验证码";
                        codeTime.value = false;
                        clearInterval(timer);
                        time.value = 60;
                    }
                }, 1000);
            }
        });
    } else {
        showToast("请输入正确的手机号和用户名！");
    }
};

const getInfo = async () => {
    const PReg =
        //  /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    if (!formData.userName || !formData.phoneNumber || !formData.code) {
        showToast("领取人,领取手机号,验证码不能为空！");
        return false;
    }
    if (!PReg.test(formData.phoneNumber)) {
        showToast("手机号格式错误！");
        return false;
    }
    btnFlag.value = true;
    loading.value = true;

    await receiveFnc({
        userName: formData.userName,
        phoneNumber: formData.phoneNumber,
        code: formData.code,
        versions: versions.value,
        num: num.value,
    })
        .then((res) => {
            // console.log(res);
            showToast(res.msg);
            if (res.code == 200) {
                formData.userName = "";
                formData.phoneNumber = "";
            }
        })
        .catch(() => {
            btnFlag.value = false;
            loading.value = false;
        })
        .finally(() => {
            btnFlag.value = false;
            loading.value = false;
        });
};
import { useRouter } from "vue-router";
const router = useRouter();
const toSearch = () => {
    router.push(`/search`);
};
// md5.appendAsciiStr(`helloworld`)
onMounted(() => {
    document.title = "话费领取";
});

/**END */
</script>
<template>
    <div style="max-width: 750px; margin: 0 auto" class="bg" v-loading="loading">
        <span class="receive-record" @click="toSearch">领取记录</span>
        <div class="form">
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="formData.userName" name="姓名" placeholder="请输入姓名" maxlength="15"
                        left-icon="https://fx.yunyoutongxin.com/image/hfuser.png" />

                    <van-field v-model="formData.phoneNumber" name="手机号" placeholder="请输入手机号" maxlength="11"
                        left-icon="https://fx.yunyoutongxin.com/image/hfph.png" center>
                        <template #button>
                            <van-button @click="getCode" :disabled="codeTime" size="small" round color="#e3d3d3"
                                type="primary" style="color: #333">
                                {{ send }}</van-button>
                        </template>
                    </van-field>

                    <van-field v-model="formData.code" name="验证码" placeholder="请输入验证码"
                        left-icon="https://fx.yunyoutongxin.com/image/hfyz.png" maxlength="4" />
                    <div style="margin-top: 0.1rem" @click="getInfo">
                        <van-image width="100%" src="https://fx.yunyoutongxin.com/image/hfbtn.png" />
                    </div>
                </van-cell-group>
            </van-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.form {
    width: 7rem;
    // height: 7rem;
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -3.5rem;
}

.bg {
    height: 17rem;
    background: url("https://fx.yunyoutongxin.com/image/hflq1.jpg") no-repeat;
    background-size: 100% 100%;
}

.orderlist {
    p {
        font-size: 12px;
        line-height: 1.5em;
        padding-left: 0.4rem;
    }
}

.mb {
    margin-bottom: 0.1rem;
    padding: 0.2rem;
}

.receive-record {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2.666666666666667vmin 0 0 2.666666666666667vmin;
    color: #fff;
    font-family: PingFangSC-Regular, Source Han Sans CN;
    font-size: 3.2vmin;
    padding: 0.6666666666666667vmin 1.866666666666667vmin 0.6666666666666667vmin 2.9333333333333336vmin;
    right: 0;
    top: 4vmin;
}

:deep(.van-popup--center.van-popup--round) {
    width: 80%;
}

:deep(.van-cell-group) {
    background-color: transparent;
}

:deep(.van-cell) {
    margin-bottom: 16px;
    background-color: transparent;
    border: 2px solid #d59c99;
    border-radius: 30px;
}

:deep(.van-icon__image) {
    width: 30px;
    height: 30px;
}
</style>
